<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form :form="form" :labelCol="{ sm: { span: 4 } }" :wrapperCol="{ sm: { span: 8 } }">
          <!-- 检查是否有 id 并且大于0，大于0是修改。其他是新增，新增不显示主键ID -->
          <!-- <a-form-item v-show="model && model.id > 0" label="ID">
            <a-input v-decorator="['id', { initialValue: 0 }]" disabled />
          </a-form-item> -->

          <a-form-item label="平台名称 - 中文" style="margin-bottom:10px;">
            <a-input v-decorator="['platformName']" placeholder="请输入平台名称" />
          </a-form-item>
          <a-form-item label="英文">
            <a-input v-decorator="['platformNameUs']" placeholder="请输入平台名称- 英文" />
          </a-form-item>
          <a-form-item label="平台简介 - 中文" style="margin-bottom:10px;">
            <a-input v-decorator="['platformIntro']" placeholder="请输入平台简介" />
          </a-form-item>
          <a-form-item label="英文">
            <a-input v-decorator="['platformIntroUs']" placeholder="请输入平台简介- 英文" />
          </a-form-item>

          <a-form-item label="平台说明 - 中文" style="margin-bottom:10px;">
            <a-input v-decorator="['platformDesc']" placeholder="请输入平台说明" />
          </a-form-item>
          <a-form-item label="英文">
            <a-input v-decorator="['platformDescUs']" placeholder="请输入平台说明- 英文" />
          </a-form-item>
          <a-form-item label="注册赠送金额(元)">
            <a-input v-decorator="['initBalance']" placeholder="请输入注册金额" />
          </a-form-item>
          <a-form-item label="QQ号码">
            <a-input v-decorator="['qq']" placeholder="请输入QQ号码" />
          </a-form-item>
          <a-form-item label="Telegram账号">
            <a-input v-decorator="['tg']" placeholder="请输入telegram账号" />
          </a-form-item>
          <a-form-item label="微信号码">
            <a-input v-decorator="['wx']" placeholder="请输入微信号码" />
          </a-form-item>
          <a-form-item label="联系号码">
            <a-input v-decorator="['mobile']" placeholder="请输入联系号码" />
          </a-form-item>
          <a-form-item label="邮箱">
            <a-input v-decorator="['email']" placeholder="请输入邮箱" />
          </a-form-item>
          <a-form-item :wrapper-col="{ sm: { offset: 4, span: 8 } }">
            <a-button type="primary" @click="handleSave">保存</a-button>
          </a-form-item>
        </a-form>
      </div>
      <!-- <step-by-step-modal ref="modal" @ok="handleOk" /> -->
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { settingUpdate, settingGet } from '@/api/system'
import pick from 'lodash.pick'

const columns = [
  // id、类型、内容、备注、截至时间、添加人、添加时间、最后编辑人、最后编辑时间
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
    fixed: true,
  },
  {
    title: '内容',
    dataIndex: 'content',
    scopedSlots: { customRender: 'content' },
  },
  {
    title: '类型',
    dataIndex: 'cType',
    scopedSlots: { customRender: 'cType' },
  },

  {
    title: '备注',
    dataIndex: 'remark',
    scopedSlots: { customRender: 'remark' },
  },
  {
    title: '截至时间',
    dataIndex: 'upToTime',
    key: 'upToTime',
  },
  {
    title: '添加人',
    dataIndex: 'addUserName',
    key: 'addUserName',
    customRender: (text) => text || '--',
  },
  {
    title: '添加时间',
    dataIndex: 'addTime',
    key: 'addTime',
    customRender: (text) => text || '--',
  },
  {
    title: '最后编辑人',
    dataIndex: 'lastUpdateUserName',
    key: 'lastUpdateUserName',
    customRender: (text) => text || '--',
  },
  {
    title: '最后编辑时间',
    dataIndex: 'lastUpdateTime',
    key: 'lastUpdateTime',
    customRender: (text) => text || '--',
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '150px',
    scopedSlots: { customRender: 'action' },
  },
]
const fields = [
  'platformName',
  'platformIntro',
  'platformDesc',
  'initBalance',
  'qq',
  'tg',
  'wx',
  'mobile',
  'email',
  'platformNameUs',
  'platformIntroUs',
  'platformDescUs',
]

export default {
  name: 'AWM-Set',
  data() {
    this.columns = columns
    return {
      confirmLoading: false,
      // 高级搜索 展开/关闭
      // 查询参数
      // 加载数据方法 必须为 Promise 对象
      form: this.$form.createForm(this),
      details: {},
    }
  },

  created() {
    fields.forEach((v) => this.form.getFieldDecorator(v))

    this.getDetails()
    // getRoleList({ t: new Date() })
  },
  computed: {
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectChange,
      }
    },
  },
  methods: {
    getDetails() {
      settingGet().then((res) => {
        this.details = res.data
        let data = pick(res.data, fields)
        data.onlineServiceStatus = !!data.onlineServiceStatus
        this.form.setFieldsValue(data)
      })
    },
    handleSave() {
      const form = this.form
      this.confirmLoading = true
      form.validateFields((errors, values) => {
        if (!errors) {
          values.id = this.details.id
          values.onlineServiceStatus = values.onlineServiceStatus ? 1 : 0
          console.log(values);
          // return false
          settingUpdate(values)
            .then((res) => {
              this.$message.success('修改成功!')
            })
            .catch((err) => {})
        } else {
          this.confirmLoading = false
        }
      })
    },
  },
}
</script>

 